<template>

  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>项目审核</el-breadcrumb-item>
    </el-breadcrumb>

    <el-divider></el-divider>
    <el-card style="height: 580px;margin: 0 auto;">

    <el-form :inline="true" ref="form" :model="form" label-width="80px">
        <el-form-item label="申报年度:" size="">
          <el-date-picker
              v-model="form.reportYear"
              type="year"
              placeholder="选择年">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="运营单位:"  label-width="100px">
          <el-input :span="15" v-model="form.projectUnit" placeholder="请输入运营单位"></el-input>
        </el-form-item>
        <el-form-item label="审核状态:">
          <el-select v-model="form.reportState">
            <el-option label="待审核" value="待审核"></el-option>
            <el-option label="审核通过" value="审核通过"></el-option>
            <el-option label="审核失败" value="审核失败"></el-option>
          </el-select>
        </el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="selectByYear()">查询</el-button>
        <el-button type="primary" icon="el-icon-refresh-right" @click="clear()">重置</el-button>
      </el-form>
      <div style=":border:1px solid #409eff;background-color: rgba(64,158,255,0.1);margin:20px 10px;padding:12px 30px;color:#606266;border-radius: 5px;">
        已选择<a style="text-decoration: none;color:#409eff" href="javascript:void(0)">{{n}}</a>项
        <span style=" font-size: 15px; margin-left: 30px" >
                    <a style="text-decoration: none;color:#409eff" href="javascript:void(0)" @click="clearT()">清空</a>
            </span>
        <span style=" font-size: 15px; margin-left: 30px" >
        <el-button
            size="mini"
            type="danger"
            v-if="n>0"
            @click="handleDeleteList()">全部删除</el-button>
   </span>
      </div>
      <template>
        <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%;"
            :border="true"
            @selection-change="selecteed"
        >
          <el-table-column
              type="selection"
              width="35">
          </el-table-column>
          <el-table-column
              prop="reportYear"
              label="申报年度"
              align="center"
              width="77">
          </el-table-column>
          <el-table-column
              prop="reportType"
              label="申报类型"
              align="center"
              width="77">
          </el-table-column>
          <el-table-column
              prop="reportProject"
              align="center"
              label="申报全称"
              width="150">
          </el-table-column>
          <el-table-column
              prop="projectUnit"
              align="center"
              label="运营单位"
              width="150">
          </el-table-column>
          <el-table-column
              prop="orgCode"
              label="机构代码"
              align="center"
              width="150">
          </el-table-column>
          <el-table-column
              prop="lawPerson"
              label="法人代表"
              align="center"
              width="100">
          </el-table-column>
          <el-table-column
              prop="linkPerson"
              label="联系人"
              align="center"
              width="100">
          </el-table-column>
          <el-table-column
              prop="job"
              label="职务"
              align="center"
              width="100">
          </el-table-column>
          <el-table-column
              prop="tel"
              label="电话"
              align="center"
              width="150">
          </el-table-column>
          <el-table-column
              prop="fax"
              label="传真"
              align="center"
              width="150">
          </el-table-column>
          <el-table-column
              prop="email"
              label="电子邮箱"
              align="center"
              width="200">
          </el-table-column>
          <el-table-column
              prop="zipCode"
              label="邮政编码"
              align="center"
              width="100">
          </el-table-column>
          <el-table-column
              prop="address"
              label="联系地址"
              align="center"
              width="200">
          </el-table-column>
          <el-table-column
              prop="reportState"
              label="审核状态"
              align="center"
              width="100">
          </el-table-column>


          <el-table-column
              align="center"
              label="操作"
              fixed="right"
              width="103">
            <template slot-scope="scope">
              <el-dropdown>
  <span class="el-dropdown-link" @click="get(scope.row)">
    更多<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>
                    <el-button type="text" @click="more(scope.row) ">详情</el-button>
                  </el-dropdown-item>

                  <el-dropdown-item>
                    <el-button type="text" @click="ok(scope.row)">通过</el-button>
                  </el-dropdown-item>


                  <el-dropdown-item>

                    <el-button type="text" @click="fail1(scope.row.id)">回驳</el-button>

                  </el-dropdown-item>

                </el-dropdown-menu>
              </el-dropdown>

            </template>

          </el-table-column>

        </el-table>
        <el-dialog title="回驳意见" :visible.sync="fail"><hr>
          <el-form>
            <div>
              <el-form-item label="申报全称">
                <el-input v-model="reportProject" autocomplete="off" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="回驳意见:">
                <el-input  type="textarea"
                           :rows="4" v-model="message.rejectMessage" autocomplete="off" placeholder="请输入回驳意见"></el-input>
              </el-form-item>

            </div>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="updateState()">确 定</el-button>
            <el-button @click="fail = false">关 闭</el-button>
          </div>
        </el-dialog>
      </template>

      <el-drawer
          title="详情"
          size="800px"
          :visible.sync="drawer2"
          :with-header="false"
      >

        <span style="display:block;line-height: 25px;font-size: 15px; margin:10px 20px">详情</span>
        <hr>
        <div style="margin-left: 20px; ">

          <center>
            <span style="font-size: 20px; font-weight: bold; ">{{reportProject}}</span>
          </center>
          <br>
          <template >
            <el-tabs v-model="activeName" @tab-click="handleClick" >
              <el-tab-pane label="资质与基本情况" name="first">
                <span>资质:</span>
                <el-input  type="textarea"
                           :readonly="true"
                           :rows="4" v-model="report.qualifications"
                           autocomplete="off" placeholder="请输入资质"></el-input>
                <span>基本情况:</span>
                <el-input  type="textarea"
                           :readonly="true"
                           :rows="4" v-model="report.basicInformation"
                           autocomplete="off" placeholder="请输入基本情况"></el-input>
                <el-button type="primary" @click="activeName='second'">下一个</el-button>
              </el-tab-pane>
              <el-tab-pane label="经济社会效益" name="second">
                <span>经济效益:</span>
                <el-input  type="textarea"
                           :readonly="true"
                           :rows="5" v-model="report.economicEffect"
                           autocomplete="off" placeholder="请输入经济效益"></el-input>
                <span>社会效益:</span>
                <el-input  type="textarea"
                           :readonly="true"
                           :rows="5" v-model="report.socialEffect"
                           autocomplete="off" placeholder="请输入社会效益"></el-input>
                <el-button type="primary" @click="activeName='first'">返回</el-button>
                <el-button type="primary" @click="activeName='third'">下一个</el-button>
              </el-tab-pane>
              <el-tab-pane label="管理经营与规划" name="third">
                <span>如何管理:</span>
                <el-input  type="textarea"
                           :readonly="true"
                           :rows="5" v-model="report.management"
                           autocomplete="off" placeholder="请输入如何管理"></el-input>
                <span>未来规划:</span>
                <el-input  type="textarea"
                           :readonly="true"
                           :rows="5" v-model="report.planning"
                           autocomplete="off" placeholder="请输入未来规划"></el-input>
                <el-button type="primary" @click="activeName='second'">返回</el-button>
              </el-tab-pane>
            </el-tabs>
          </template>

        </div>


      </el-drawer>
    </el-card>
  </div>
</template>

<script>
export default {
  data(){
    // name: "SUnitDeclaration"
    return {

      fail:false,
      id:'',
      message:{
        projectId:"",
        rejectMessage:""
      },
      reportProject:"",
      n:0,
      form: {
        reportYear: '',
        projectUnit: '',
        reportState: '',
        reportType:'单位申报'
      },
      tableData: [],
      drawer1: false,
      drawer2:false,
      activeName: 'first',
      options: [{
        value: '单位申报',
        label: '单位申报'
      }],
      report:{
        reportType:'单位申报'
      },
      ids:[]
    }
  },
  methods: {
    fail1(id){
      this.message.rejectMessage=''
      this.fail=true

      this.id=id
    },
    get(project){
      this.reportProject=project.reportProject
    },
    more(project){
      let url='http://localhost:8080/projects/projectInformation/'+project.id;
      console.log(url+"通过审核"+project.id)
      this.axios.create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response)=> {
        this.report=response.data.data
        this.loadProjectList();
      })
      console.log()
      this.drawer2 = true
    },
    ok(project){

      let url='http://localhost:8080/projects/stateOkById/'+project.id;
      console.log(url+"通过审核"+project.id)
      this.axios.create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url).then((response)=> {
        this.loadProjectList();
      })
    },
    updateState(){

      this.message.projectId =this.id
      let message = this.qs.stringify(this.message)
      let url='http://localhost:8080/projects/add-new-projectReject';
      console.log(message,url)
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url,message).then((response)=> {
        this.loadProjectList();
      })
      this.$message.success("回驳成功")
      this.fail = false
    },
    handleDeleteList(){
      let url='http://localhost:8080/projects/deleteByIds/'+this.ids;
      // let ids=this.qs.stringify(this.ids);
      console.log("发送批量删除请求:",url)
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url).then((response)=> {
        this.loadProjectList();
      })

    },
    loadProjectList(){
      let url='http://localhost:8080/projects/projectList/'+this.report.reportType;
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response)=> {
        let responseBody = response.data
        this.tableData = responseBody.data;
      })
    },
    selecteed(selections){
      this.n=selections.length
      this.ids=[]
      for (let i = 0; i < selections.length; i++) {
        this.ids[i]=selections[i].id
      }
    },
    selectByYear(){

      let url='http://localhost:8080/projects/selectByYear';
      let from=this.qs.stringify(this.form);
      console.log("发送条件查询请求:",url+from)
      this.axios .create({'headers': {'Authorization': localStorage.getItem('jwt')}}).post(url,from).then((response)=>{
        let responseBody = response.data
        this.tableData = responseBody.data;
      })
    },
    clear(){
      this.form={
        reportType:'单位申报'
      }
      this.loadProjectList();
    },
    clearT(){
      this.$refs.multipleTable.clearSelection();
    },
    handleDelete(index, row) {
      if(confirm("您确定删除吗?")){
        let url = "http://localhost:8080/projects/";
        this.axios.create({'headers': {'Authorization': localStorage
                .getItem('jwt')}}).post(url+row.id+"/delete")
            .then( (response)=> {
              console.log("id====="+row.id)
              this.tableData.splice(index,1);
            })
        console.log(index, row);}
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    report1(){
      let url='http://localhost:8080/projects/add-new';
      let report=this.qs.stringify(this.report);
      this.axios .create({'headers': {'Authorization': localStorage.getItem('jwt')}}).post(url,report).then((response)=>{
        alert("提交成功")
        this.loadProjectList();
      })
    }
  },mounted() {
    this.loadProjectList();
  }

}
</script>

<style scoped>
#commit_table>span{
  display: inline-block;
  margin: 15px 25px;
}
</style>